import { useNavigate, useParams } from "react-router-dom"
import { useGetAnimalQuery } from "@/app/animals/animalsApi"
import { AnimalPersonalCard } from "@/features/AnimalCard"
import { PawPrint, UserRound } from "lucide-react"
import { Button } from "@/shared/ui/button"
import { Routes } from "@/shared/consts"
import { imageUrl } from "@/shared/lib"
import { Skeleton } from "@/shared/ui/skeleton"
import { LoadingSpinner } from "@/shared/ui/loadingSpinner"

const AnimalPage = () => {
  const navigate = useNavigate()
  const { animalId } = useParams()
  const { data, isLoading } = useGetAnimalQuery(animalId || "", {
    skip: !animalId,
    refetchOnMountOrArgChange: true,
  })
  const curator = data?.attributes?.curator?.data?.attributes
  const curatorAvatar = curator?.avatar?.data?.attributes?.url

  return (
    <div className="flex flex-1 flex-col justify-between">
      <div>
        <div className="absolute flex gap-2 rounded-full bg-secondary text-secondary-foreground hover:bg-secondary/80 p-1 px-3 right-0 top-0 items-center">
          {isLoading ? (
            <>
              <Skeleton className="h-6 w-6 rounded-full" />
              <div className="flex flex-col">
                <Skeleton className="h-4 w-[120px]" />
                <Skeleton className="h-4 w-[100px]" />
              </div>
            </>
          ) : (
            <>
              {curatorAvatar ? (
                <img
                  src={imageUrl(curatorAvatar)}
                  alt=""
                  className="h-6 w-6 object-contain rounded-full"
                />
              ) : (
                <UserRound className="h-6 w-6" />
              )}
            </>
          )}
          {!isLoading && (
            <div className="flex flex-col">
              <p className="text-[10px]">Куратор</p>
              <p className="text-xs">{curator?.name}</p>
            </div>
          )}
        </div>
        {!isLoading && data?.attributes ? (
          <AnimalPersonalCard {...data?.attributes} />
        ) : (
          <LoadingSpinner fixed />
        )}
      </div>
      <Button
        onClick={() => navigate(`${Routes.Dogs}/${animalId}/request`)}
        disabled={isLoading}
      >
        Забрать домой
      </Button>
    </div>
  )
}
export default AnimalPage
